<template>
	<div>
		<div class="left">
			<el-card class="hi" key="a">
				<div class="item1">
					<span style="font-size: 15px; font-weight: bold ;">user,晚上好！</span>
					<br /><br />
					<span style="font-size: 18px; font-weight: bold ;">待处理 已完成 {{percentage}}%</span> <br /><br />
					<el-progress :text-inside="true" :stroke-width="18" :percentage="percentage"></el-progress>
				</div>
				<el-divider direction="vertical"></el-divider>
				<div class="item2">
					<span style="color: #9e9e9e; font-size: 15px;">{{ nowDate }}</span> &nbsp;&nbsp;&nbsp;&nbsp;今天工作总计 <br />
					<div class="task">
						<span>我的任务</span>
						<br />
						<span style="font-size: 30px;font-weight: bold ; cursor: pointer; " class="st" @click="gotolink">&nbsp;&nbsp;{{tasks}}</span>
						<br />
						<el-tag type="danger" style="size: mini;" @click="overdueTask()">已延期:{{overdue}}</el-tag>
					</div>
					<div class="uclosed-items">
						<span>进行中的项目</span>
						<br />
						<span style="font-size: 30px;font-weight: bold ; cursor: pointer;" class="st" @click="unClosedTask()">&nbsp;&nbsp;&nbsp;&nbsp;{{projects}}</span>
						<br />
						<el-tag type="danger" style="size: mini; cursor: pointer;">已延期:{{projectoverdue}}</el-tag>
					</div>
					<div class="progress">
						<span>进行中的迭代</span>
						<br />
						<span style="font-size: 30px;font-weight: bold ; cursor: pointer;" class="st">&nbsp;&nbsp;&nbsp;{{iteration}}</span>
						<br /><br />
					</div>
				</div>
			</el-card>
			<el-card class="overview" :body-style="{ padding: '0px' }" key="b">
				<div>
					<span style="font-size: 12px; font-weight: bold ;">项目统计</span>
					<br />
					<div style="display: inline-block;margin-top: 10px;width: 212px; height: 200px;">
						<el-scrollbar wrap-style="overflow-x:hidden;">
							<ul class="ul">
								<li class="line" v-for="item in Pname" @click="ck(item)" v-bind:class="[{active: pfname == item}]">
									<a style="font-size: 12px;" @click="checkItem(item)">{{ item }}</a>
									<a class="btn-view" @click="goToProject(item)"><i style="font-size:14px;color:#00aaff ;padding: 0px;" class="icon iconfont icon-arrow"></i></a>
								</li>
							</ul>
						</el-scrollbar>
					</div>
					<div style="display: inline-block;vertical-align:top; margin-left: 20px;">
						<div class="table-row">
							<div class="text-center" style="display: inline-block;margin-left: 20px;margin-top: 30px;">
								<div style="margin-left: 10px;">
									<h4>任务</h4>
								</div>
								<div style="margin-top: 20px;">
									<div style="display: inline-block;">总任务：</div>
									<div style="display: inline-block;margin-left:10px;font-weight: bold ;">{{total}}</div>
								</div>
								<div style="margin-top: 10px;">
									<div style="display: inline-block;">已完成：</div>
									<div style="display: inline-block;margin-left:10px;font-weight: bold ;">{{completed}}</div>
								</div>
								<div style="margin-top: 10px;">
									<div style="display: inline-block;">剩余：</div>
									<div style="display: inline-block;margin-left:26px;font-weight: bold ;">{{remaining}}</div>
								</div>
							</div>
							<div class="text-center" style="display: inline-block;vertical-align: top; margin-top: 30px; margin-left: 80px;">
								<div style="margin-left: 10px;">
									<h4>投入</h4>
								</div>
								<div style="margin-top: 20px;">
									<div style="display: inline-block;">总人数：</div>
									<div style="display: inline-block;margin-left:18px;font-weight: bold ;">{{personNum}}</div>
								</div>
								<div style="margin-top: 10px;">
									<div style="display: inline-block;">预计天数：</div>
									<div style="display: inline-block;margin-left:4px;font-weight: bold ;">{{time}}</div>
								</div>
								<div style="margin-top: 10px;">
									<div style="display: inline-block;">已消耗：</div>
									<div style="display: inline-block;margin-left:18px;font-weight: bold ;">{{timeleft}}</div>
								</div>
							</div>
							<div class="text-center" style="display: inline-block;vertical-align: top; margin-left: 80px; margin-top: 30px;">
								<div style="margin-left: 10px;">
									<h4>待办</h4>
								</div>
								<div style="margin-top: 20px;">
									<div style="display: inline-block;">总TODO：</div>
									<div style="display: inline-block;margin-left:5px;font-weight: bold ;">0</div>
								</div>
								<div style="margin-top: 10px;">
									<div style="display: inline-block;">已解决：</div>
									<div style="display: inline-block;margin-left:19px;font-weight: bold ;">0</div>
								</div>
								<div style="margin-top: 10px;">
									<div style="display: inline-block;">未解决：</div>
									<div style="display: inline-block;margin-left:19px;font-weight: bold ;">0</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</el-card>
			<el-card key="c">
				<span>项目管理</span>
				<el-table :data="listTotal" style="width: 100%" :default-sort="{ prop: 'stime', order: 'descending' }" size="mini">
					<el-table-column prop="name" label="项目名称" sortable width="150px"></el-table-column>
					<el-table-column prop="owner" label="负责人" sortable width="80px"></el-table-column>
					<el-table-column prop="status" label="状态" sortable :formatter="stateFormat" width="80px"></el-table-column>
					<el-table-column prop="creator" label="创建者" sortable width="80px"></el-table-column>
					<el-table-column prop="number" label="人数" sortable width="70px"></el-table-column>
					<el-table-column prop="stime" label="预计开始" sortable width="144px"></el-table-column>
					<el-table-column prop="etime" label="预计结束" sortable width="144px"></el-table-column>
				</el-table>
			</el-card>
			<el-card key="d">
				<div>待处理</div>
				<el-table :data="taskListTotal" style="width: 100%" :default-sort="{ prop: 'etime', order: 'descending' }" size="mini">
					<el-table-column prop="id" label="ID" sortable width="80px"></el-table-column>
					<el-table-column prop="name" label="任务名称" sortable width="280px"></el-table-column>
					<el-table-column prop="classHours" label="预计" sortable width="80px"></el-table-column>
					<el-table-column prop="etime" label="任务结束时间" sortable></el-table-column>
					<el-table-column prop="status" label="状态" :formatter="statuFormat" sortable></el-table-column>
				</el-table>
			</el-card>
		</div>
		<div class="right">
			<el-card>
				<span style="font-size: 15px; font-weight: bold ;">最新动态</span>
				<div class="block " style="height: 400px;">
					<el-scrollbar wrap-style="overflow-x:hidden;">
						<el-timeline >
							<el-timeline-item v-for="(item,i) in tableData"  placement="top">
								<el-card>
									<h4>{{item.content}}</h4>
									<p>{{item.operator}} 提交于 {{item.date}}</p>
								</el-card>
							</el-timeline-item>
							
						</el-timeline>
					</el-scrollbar>
				</div>
			</el-card>
			<el-card>
				<div>
					<div class="page-top">
						<div class="page-content">
							<h2>任务计划列表</h2>
						</div>
					</div>
					<div class="main">
						<span style="font-size: 15px;font-weight: bold;">添加任务：</span>
						<el-button type="primary" plain @click="todoAdd()" style="display: block;">添加任务</el-button> 
						<todoadd  v-show ="show" @todoAdd="todoAdd()"></todoadd>
						<span style="font-size: 15px;font-weight: bold;"> 任务列表： <el-tag v-if="todos.filter(item => item.status==0).length!=0" type="danger" style="size: mini;">事情里面有{{ todos.filter(item => item.status==0).length }}项待完成</el-tag>
						</span>
						<div class="tasks">
							<p v-for="(item, index) in todos">
								<el-checkbox-group v-model="item.id" @change="clickMe(item)">
									<el-checkbox  :label="item.id" :key="item.id" > {{ item.name }} </el-checkbox>
								</el-checkbox-group>
							</p>
							<p>已完成</p>
							<p v-for="(item, index) in doneTodos">
								<span>{{ item.name }}</span>
								<el-button type="text" @click="handleRemoveTodoClick(index)" style="margin-left: 22px">删除</el-button>
							</p>
						</div>
					</div>
				</div>
			</el-card>
		</div>
	</div>
</template>
<script>
	import { Message } from 'element-ui';
	import axios from '../../utils/axiosutils.js';
	import todoadd from './todoadd.vue';
	export default {
		name: '',
		data() {
			return {
				percentage: 0,
				overdue: '',
				tasks: '',
				projectoverdue: '',
				projects: '',
				iteration: '',
				//项目统计
				total: 0,
				completed: 0,
				personNum: 0,
				time: 0,
				timeleft: 0,
				remaining: 0,
				//项目管理
				listTotal: [],
				//待处理的任务
				taskListTotal: [],
				nowDate: '',
				input3: '',
				Pname: [],
				pfname: '',
				tableData: [],
				list: '',
				todos: [],
				doneTodos: [],
				edtorTodos: '', //记录正在编辑的数据
				beforeTitle: '', //记录一下正在编辑的数据的title
				visibility: 'all', //通过这个属性值的变化对数据进行筛选
				show: false,
				title: '',
				ckeckVal: false
			};
		},
		components: {
			todoadd
		},
		created() {
			this.currentTime();
			this.totaltaskdata();
		},
		methods: {
			/* 初始化数据 */
			totaltaskdata() {
				/* 请求 工作总计 */
				axios.get("/task/mytask", resp => {
						this.percentage = Number(resp.obj.percentage * 100);
						this.overdue = resp.obj.overdue;
						this.tasks = resp.obj.tasks;
						this.projectoverdue = resp.obj.projectoverdue;
						this.projects = resp.obj.projects;
						this.iteration = resp.obj.iteration; //迭代
					}),
					/* 项目列表 */
					axios.get("/project/myProjects", resp => {
						this.Pname = resp.obj.names;
						if (resp.obj.names != null) {
							this.pfname = resp.obj.names[0];
						}
					}),
					/* 项目列表的详情 */
					this.checkItem(null);
				/* 项目管理 */
				axios.get("project/listview", resp => {
						this.listTotal = resp.obj;
					}),
					/* 任务 */
					axios.get("task/listview", resp => {
						this.taskListTotal = resp.obj;
					});
				this.getTodoList();
				// 日志
				axios.post("log/list",resp=>{
					this.tableData=resp.obj
				});
			},
			/* 获取当前时间 */
			currentTime() {
				setInterval(this.formatDate, 500);
			},
			formatDate() {
				let date = new Date();
				let year = date.getFullYear(); // 年
				let month = date.getMonth() + 1; // 月
				let day = date.getDate(); // 日
				let week = date.getDay(); // 星期
				let weekArr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
				let hour = date.getHours(); // 时
				hour = hour < 10 ? '0' + hour : hour; // 如果只有一位，则前面补零
				let minute = date.getMinutes(); // 分
				minute = minute < 10 ? '0' + minute : minute; // 如果只有一位，则前面补零
				let second = date.getSeconds(); // 秒
				second = second < 10 ? '0' + second : second; // 如果只有一位，则前面补零
				this.nowDate = `${year}/${month}/${day} ${hour}:${minute}:${second} ${weekArr[week]}`;
			},
			/*项目总览*/
			ck(item) {
				this.pfname = item
			},
			/* 项目管理 */
			//动态数据翻译
			stateFormat(row) {
				if (row.status == 0) {
					return "未开始";
				} else if (row.status == 1) {
					return "已关闭";
				} else {
					return "正在进行中"
				}
			},
			statuFormat(row) {
				if (row.status == 0) {
					return "未开始";
				} else if (row.status == 1) {
					return "进行中";
				} else if (row.status == 2) {
					return "已暂停"
				} else if (row.status == 3) {
					return "已完成"
				} else if (row.status == 4) {
					return "已取消"
				} else if (row.status == 4) {
					return "已关闭"
				}
			},
			gotolink() {
				//指定跳转地址
				// this.$router.replace('/task');
				this.$router.push({
					name: "任务",
					params: {
						status: '1'
					}
				})
			},
			formatter(row, column) {
				return row.address;
			},
			/* todolist */
			todoAdd() {
				if(this.show){
					this.show =false ;
				}else{
					this.show=true;
				}
				this.getTodoList();
			},
			enterFn(ev) {
				//添加任务
				//向list中添加一项任务
				//事件处理函数中的this指向的是当前这个根实例
				if (this.todo == '') {
					return;
				}
				this.list.push({
					title: this.todo,
					isComplete: false
				});
				this.todo = '';
			},
			delFn(item) {
				//删除任务
				var index = this.list.indexOf(item);
				this.list.splice(index, 1);
			},
			edtorTodo(item) {
				//编辑任务
				//编辑任务的时候记录编辑之前的值
				this.beforeTitle = item.title;
				this.edtorTodos = item;
			},
			edtoEnd(item) {
				//编辑完成
				this.edtorTodos = '';
				// this.cancelEdit = this.edtorTodos;
			},
			cancelEdit(item) {
				//取消编辑
				item.title = this.beforeTitle;
				this.beforeTitle = '';
				this.edtorTodos = '';
			},
			//延期的任务跳转
			overdueTask() {
				this.$router.push({
					name: "任务",
					params: {
						status: '6'
					}
				})
			},
			unClosedTask() {
				this.$router.push({
					name: "任务",
					params: {
						status: '1'
					}
				})
			},
			checkItem(item) {
				axios.get("project/projectDetail", resp => {
					this.total = resp.obj.total;
					this.completed = resp.obj.completed;
					this.personNum = resp.obj.personNum;
					this.time = resp.obj.time;
					this.timeleft = resp.obj.timeleft;
					this.remaining = resp.obj.remaining;
				}, {
					projectName: item
				});
			},
			getTodoList() {
				axios.post("todo/list", resp => {
					this.todos = resp.obj;
				})
				axios.post("todo/doneList", resp => {
					this.doneTodos = resp.obj;
				})
			},
			//待办列表的checkbox
			clickMe(item) {
				axios.post("todo/changeList", resp => {
					Message.success("已完成");
					this.getTodoList();
				}, {
						name: item.name
				})

			},
			goToProject(item){
				this.$router.push({
					name: '项目',
					query: {
						projectName: item
					}
				})
			}
		},
		watch: {
			list: {
				handler: function() {
					store.save('storeData', this.list);
				},
				deep: true
			}
		},
		directives: {
			focus: {
				update(el, binding) {
					if (binding.value) {
						el.focus();
					}
				}
			}
		}
	};
</script>
<style scoped>
	.left {
		display: inline-block;
		width: 780px;
	}

	.right {
		margin-left: 40px;
		display: inline-block;
		vertical-align: top;
		width: 458px;
	}

	.hi {
		padding: 5px;
		margin: 0px;
		width: 765px;
	}

	.item1 {
		display: inline-block;
	}

	.item2 {
		display: inline-block;
	}

	.task {
		display: inline-block;
		margin-top: 10px;
		margin-left: 20px;
		margin-right: 110px;
		text-align: center;
	}

	.uclosed-items {
		display: inline-block;
		text-align: center;
	}

	.progress {
		margin-left: 108px;
		display: inline-block;
		text-align: center;
	}

	.el-tag {
		height: 20px;
		line-height: 20px;
	}

	.el-divider--vertical {
		display: inline-block;
		width: 1px;
		height: 7em;
		margin-left: 24px;
		margin-right: 25px;
		vertical-align: sub;
	}

	.el-card {
		margin-bottom: 10px;
	}

	/* span悬停 */
	.st:hover {
		color: #0055ff;
	}

	.ghostClass {
		background-color: blue !important;
	}

	.chosenClass {
		background-color: #bababa !important;
		opacity: 1 !important;
	}

	.dragClass {
		background-color: blueviolet !important;
		opacity: 1 !important;
		box-shadow: none !important;
		outline: none !important;
		background-image: none !important;
	}

	/* 项目总览 */
	.overview {
		padding: 10px !important;
	}

	.ul {
		display: block;
		list-style-type: none;
		margin-block-start: 1em;
		margin-block-end: 1em;
		margin-inline-start: 0px;
		margin-inline-end: 0px;
		padding-inline-start: 40px;
	}

	.ul li.active {
		color: black;

		//列表选中时箭头也显示出来
		.btn-view {
			opacity: 1;
			display: inline-block;
			top: 0;
			right: 0;
			bottom: 0;
			padding: 0px;
			width: 26px;
			text-align: right;
			float: right;
		}
	}

	/* 项目列表 */
	.el-scrollbar {
		width: 100%;
		/* 宽度可以设置也可以不设置 因为宽度默认就是填充满父级元素的内容区 */
		height: 100%;
		/*   必须设置el-scrollbar的高度 */
		overflow-x: hidden;
	}

	.btn-view {
		/* position: absolute; */
		display: inline-block;
		top: 0;
		right: 0;
		bottom: 0;
		padding: 0px;
		width: 26px;
		text-align: right;
		opacity: 0;
		float: right;
	}

	.btn-view:hover {
		opacity: 1;
		background-color: #bfbfbf;
	}

	.line {
		color: #cecece;
	}

	.line:hover {
		background-color: #d6d6d6;
		cursor: pointer;
		color: #040404;
	}

	button {
		margin: 0;
		padding: 0;
		border: 0;
		background: 0;
		font-size: 100%;
		vertical-align: baseline;
		font-family: inherit;
		font-weight: inherit;
		color: inherit;
		outline: 0;
	}

	.page-top {
		width: 100%;
		height: 40px;
		background-color: #00aaff;
		border-radius: 20px;
	}

	.page-content {
		width: 28%;
		margin: 0 auto;
	}

	.page-content h2 {
		line-height: 40px;
		font-size: 18px;
		color: #fff;
	}

	.main {
		margin: 0 auto;
		box-sizing: border-box;
	}

	.task-input {
		width: 99%;
		height: 30px;
		outline: 0;
		border: 1px solid #ccc;
	}

	.task-count {
		display: flex;
		margin: 10px 0;
	}

	.task-count li {
		padding-left: 10px;
		flex: 1;
		color: #dd4b39;
	}

	.task-count li:nth-child(1) {
		padding: 5px 0 0 10px;
	}

	.action {
		text-align: center;
		display: flex;
	}

	.action a {
		margin: 0 10px;
		flex: 1;
		padding: 5px 0;
		color: #777;
	}

	.action a:nth-child(3) {
		margin-right: 0;
	}

	.tasks {
		background-color: #fff;
	}

	.no-task-tip {
		padding: 10px 0 10px 10px;
		display: block;
		border-bottom: 1px solid #ededed;
		color: #777;
	}

	.big-title {
		color: #222;
	}

	.todo-list {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.todo-list li {
		position: relative;
		font-size: 16px;
		border-bottom: 1px solid #ededed;
	}

	.todo-list li:hover {
		background-color: #fafafa;
	}

	.todo-list li.editing {
		border-bottom: 0;
		padding: 0;
	}

	.todo-list li.editing .edit {
		display: block;
		width: 506px;
		padding: 13px 17px 12px 17px;
		margin: 0 0 0 43px;
	}

	.todo-list li.editing .view {
		display: none;
	}

	.todo-list li .toggle {
		text-align: center;
		width: 40px;
		height: auto;
		position: absolute;
		top: 5px;
		bottom: 0;
		margin: auto 0;
		border: 0;
		-webkit-appearance: none;
		appearance: none;
	}

	.toggle {
		text-align: center;
		width: 40px;
		height: auto;
		position: absolute;
		top: 5px;
		bottom: 0;
		margin: auto 0;
		border: 0;
		-webkit-appearance: none;
		appearance: none;
	}

	.toggle:after {
		content: url('data:image/svg+xml; utf8,<svgxmlns="http://www.w3.org/2000/svg"width="40"height="40"viewBox="-10-18100135"><circlecx="50"cy="50"r="40"fill="none"stroke="#ededed"stroke-width="3"/></svg>');
	}

	.toggle:checked:after {
		content: url('data:image/svg+xml;utf8,<svgxmlns="http://www.w3.org/2000/svg"width="40"height="40"viewBox="-10-18100135"><circlecx="50"cy="50"r="40"fill="none"stroke="#bddad5"stroke-width="3"/><pathfill="#5dc2af"d="M7225L42712756l-44202034-52z"/></svg>');
	}

	.todo-list li label {
		white-space: pre-line;
		word-break: break-all;
		padding: 15px 60px 15px 15px;
		margin-left: 45px;
		display: block;
		line-height: 1.2;
		transition: color 0.4s;
	}

	.todo-list li.completed label {
		color: #d9d9d9;
		text-decoration: line-through;
	}

	.todo-list li .destroy {
		display: none;
		position: absolute;
		top: 0;
		right: 10px;
		bottom: 0;
		width: 40px;
		height: 40px;
		margin: auto 0;
		font-size: 30px;
		color: #cc9a9a;
		margin-bottom: 11px;
		transition: color 0.2s ease-out;
	}

	.todo-list li .destroy:hover {
		color: #af5b5e;
	}

	.todo-list li .destroy:after {
		content: '×';
	}

	.todo-list li:hover .destroy {
		display: block;
	}

	.todo-list li .edit {
		display: none;
	}

	.todo-list li.editing:last-child {
		margin-bottom: -1px;
	}

	.done {
		text-decoration: line-through;
		color: #ccc;
	}
</style>
